<template>
  <div v-if="scrollTop > 500" class="tools">
    <div class="tools-item flex-center flex-column flex-align-items-center pointer">
      <i class="iconfont icon-kefuzixunhui"></i>
      <p class="font-12">客服</p>
    </div>
    <p class="line"></p>
    <el-popover placement="left" :width="116" trigger="hover">
      <template #reference>
        <div class="tools-item flex-center flex-column flex-align-items-center pointer">
          <i class="iconfont icon-erweima"></i>
          <p class="font-12">服务号</p>
        </div>
      </template>
      <div class="qr-popup pointer">
        <img src="@/assets/qr-wechat.jpg">
        <p class="font-10">关注服务号</p>
        <p class="font-10">每日推荐海外红人</p>
      </div>
    </el-popover>
    <p class="line"></p>
    <div class="tools-item flex-center flex-column flex-align-items-center pointer" @click="scrollToTop">
      <i class="iconfont icon-shangjiantou_huaban"></i>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps(['scrollTop']);
console.log(props)

const scrollToTop = () => {
  window.scrollTo({
    top: 0, //回到顶部
    left: 0,
    behavior: "smooth", //smooth 平滑；auto:瞬间
  });
}
</script>

<style lang="less" scoped>
.tools {
  width: 48px;
  background: #fff;
  box-shadow: 0 2px 10px 0 rgba(31, 32, 34, .1);
  border-radius: 8px;
  position: fixed;
  bottom: 100px;
  right: 16px;
  overflow: hidden;

  .tools-item {
    height: 48px;

    &:hover {
      background: #ffedf1;
    }

    i {
      font-size: 18px;
      color: @main-color;
    }

    p {
      color: @main-color;
      margin-top: 2px;
    }
  }

  .line {
    margin: 0 8px;
    width: 32px;
    height: 1px;
    background: #e5e6eb;
  }
}

.qr-popup {
  width: 116px;
  padding: 10px 0 12px;
  text-align: center;

  img {
    width: 70px;
    height: 70px;
  }

  p {
    color: #333;
  }
}
</style>
